<template>
    <section class="w3l-hotair-form">
        <h1>智能充电桩管理系统</h1>
        <div class="container">
            <!-- /form -->
            <div class="alert alert-danger" role="alert" v-show="flag === 1">
            账号或密码错误，请重新输入！
            </div>
            <div class="alert alert-success" role="alert" v-show="flag === 2">
            登录成功
            </div>
            <div class="workinghny-form-grid">
                <div class="main-hotair">
                    <div class="content-wthree">
                        <h2>登录</h2>
                        <form @submit="login" @submit.native.prevent>
                            <input type="text" class="text" name="text" placeholder="请输入账号" v-model="username" required="" autofocus>
                            <input type="password" class="password" name="password" placeholder="请输入密码" v-model="password" required="" autofocus>
                            <button type="submit" class="btn">登录</button>
                        </form>
                        
                        <p class="account">Don't have an account? <a href="#">Register</a></p>
                    </div>
                    <div class="w3l_form align-self">
                        <div class="left_grid_info">
                            <img src="../assets/images/1.png" alt="" class="img-fluid">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script setup>
    import {ref} from 'vue'
    import {useRouter} from 'vue-router'

    const route = useRouter( )

    let username = ref()
    let password = ref()
    let flag = ref(0)

    async function login(){
        if(username.value === 'abcd'&& password.value === '1234')
        {
            flag.value = 2
            await sleep(1000)
            route.replace('/index')
        }
        else
        {
            flag.value = 1
            await sleep(1000)
            location.reload()
        }
    }

    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

</script>

<style>
    @import url('http://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
    @import '../assets/css/stylelogin.css';
    @import '../assets/css/font-awesome.min.css'
</style>
